import { Form, Input, Row } from "antd";
import { ProSelect } from "..";

interface AddressSelectProps {
    listName?: string
    request: (p: any) => Promise<any>
    disabled?: boolean
    fieldNames?: {
        label?: string
        value?: string
    }
}

const AddressSelect = ({ request, disabled = false, listName, ...rest }: AddressSelectProps) => {
    let fieldNames = {
        areaId: ['address', 'areaId'],
        areaName: ['address', 'areaName'],
        cityId: ['address', 'cityId'],
        cityName: ['address', 'cityName'],
        provinceId: ['address', 'provinceId'],
        provinceName: ['address', 'provinceName'],
        detailAddress: ['address', 'detailAddress']
    }
    Object.assign(fieldNames, rest.fieldNames)

    const form = Form.useFormInstance()
    const provinceIdNamePath = listName ? [listName, ...fieldNames.provinceId] : fieldNames.provinceId
    const areaNamePath = listName ? [listName, ...fieldNames.areaName] : fieldNames.areaName
    const cityNamePath = listName ? [listName, ...fieldNames.cityName] : fieldNames.cityName
    const provinceNamePath = listName ? [listName, ...fieldNames.provinceName] : fieldNames.provinceName

    const cityIdNamePath = listName ? [listName, ...fieldNames.cityId] : fieldNames.cityId
    const areaIdNamePath = listName ? [listName, ...fieldNames.areaId] : fieldNames.areaId

    const provinceId = Form.useWatch(provinceIdNamePath)

    const cityId = Form.useWatch(cityIdNamePath)
    return <div style={{ width: '100%' }}>
        <Form.Item noStyle hidden name={areaNamePath} />
        <Form.Item noStyle hidden name={cityNamePath} />
        <Form.Item noStyle hidden name={provinceNamePath} />
        <Row style={{ width: '100%', boxSizing: 'border-box' }} wrap={false}>

            <Form.Item rules={[{ required: true, message: '请选择省' }]} style={{ width: '33.33333%', marginRight: 5 }} name={fieldNames.provinceId}><ProSelect
                disabled={disabled}
                onChange={(e, ee: any) => {
                    form.setFieldValue(provinceNamePath, ee.name);
                    // console.log('cityNamePath=',cityNamePath)
                    // console.log('cityIdNamePath=',cityIdNamePath)
                    form.setFieldValue(areaIdNamePath, undefined)
                    form.setFieldValue(areaNamePath, undefined)
                    form.setFieldValue(cityIdNamePath, undefined)
                    form.setFieldValue(cityNamePath, undefined)
                    // form.resetFields([
                    //     areaIdNamePath,
                    //     areaNamePath,
                    //     cityIdNamePath,
                    //     cityNamePath,
                    //     fieldNames.cityId,
                    //     fieldNames.areaId,

                    // ])
                }} placeholder='请选择省' fieldNames={{
                    value: 'code',
                    label: 'name',
                }} request={() => request({ parentCode: 0 })} style={{ width: '100%' }} /></Form.Item>
            <Form.Item rules={[{ required: true, message: '请选择市' }]} style={{ width: '33.33333%', marginRight: 5 }} name={fieldNames.cityId}><ProSelect
                disabled={disabled}
                onChange={(e, ee: any) => {
                    form.setFieldValue(cityNamePath, ee.name);
                    form.setFieldValue(areaIdNamePath, undefined)
                    form.setFieldValue(areaNamePath, undefined)
                }}
                style={{ width: '100%' }}
                placeholder='请选择市'
                dep={provinceId} fieldNames={{
                    value: 'code',
                    label: 'name',
                }} request={() => provinceId ? request({ parentCode: provinceId }) : Promise.resolve([])} /></Form.Item>
            <Form.Item rules={[{ required: true, message: '请选择区' }]} style={{ width: '33.33333%' }} name={fieldNames.areaId}><ProSelect
                disabled={disabled}
                onChange={(e, ee: any) => {
                    form.setFieldValue(areaNamePath, ee.name)
                }}
                placeholder='请选择区'
                style={{ width: '100%' }}
                dep={cityId} fieldNames={{
                    value: 'code',
                    label: 'name',
                }} request={() => cityId ? request({ parentCode: cityId }) : Promise.resolve([])} /></Form.Item>
        </Row>
        <Form.Item name={fieldNames.detailAddress}>
            <Input disabled={disabled}
                placeholder="详细地址" />
        </Form.Item>
    </div>
}
export default AddressSelect